<template>
  <div class="flow-box">
    <el-row style="margin-bottom:20px;">
      <el-col :span="10" :offset="14" style="text-align:right;">
        <span>时间筛选：</span>
        <el-select v-model="timeWay" style="width:100px;">
          <el-option
            v-for="item in timeWayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-show="timeWay== 'timeDay'"
          v-model="dayValue"
          align="right"
          type="date"
          placeholder="选择日期"
        />
        <el-date-picker
          v-show="timeWay== 'timeWeek'"
          v-model="WeekValue"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
        />
        <el-date-picker
          v-show="timeWay== 'timeMonth'"
          v-model="monthValue"
          type="month"
          placeholder="选择月"
        />
        <el-date-picker
          v-show="timeWay== 'timeCustom'"
          v-model="customValue"
          type="daterange"
          range-separator="|"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:240px;"
        />
      </el-col>
    </el-row>
    <!-- 用户概況及趋势 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>用户概況及趋势</span>
      </div>
    </div>
    <div class="stat-card-box" style="margin:20px 0;">
      <template v-for="(item,index) in userInfoList">
        <div :key="index" class="stat-card user-view">
          <div class="card-title">
            <span>{{ item.title }}</span>
            <el-tooltip :content="item.hint" class="item" effect="light" placement="top">
              <i class="el-icon-info" />
            </el-tooltip>
          </div>
          <div class="card-user">{{ item.nowNum }}</div>
          <div class="card-yesterday">
            <div style="margin-bottom:10px;">
              <span>较前一天</span>
              <span class="card-yesterday-num">{{ item.compare }}</span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div style="margin:20px 0;">
      <div id="userSurvey" style="width:100%;height:340px;" />
    </div>
    <!-- 付费用户 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>付费用户</span>
      </div>
    </div>
    <el-table
      :data="userTableData"
      :header-cell-style="{background:'#eef1f6',}"
      border
      style="width: 100%;margin:20px 0;"
    >
      <el-table-column prop="userType" label="客户类型" align="center" />
      <el-table-column prop="userNum" label="用户数" align="center" />
      <el-table-column prop="userRatio" label="户数占比" align="center" />
      <el-table-column prop="perPrice" label="客单价" align="center" />
      <el-table-column prop="totalPrice" label="结算金额(元)" align="center" />
      <el-table-column prop="conversion" label="结算转化率" align="center" />
    </el-table>
    <div style="padding-top:20px;text-align:center;">
      <el-radio-group v-model="userContent" @change="handleChangeUser">
        <el-radio label="userNum">用户数</el-radio>
        <el-radio label="perPrice">客单价</el-radio>
        <el-radio label="totalPrice">结算金额</el-radio>
        <el-radio label="conversion">结算转化率</el-radio>
      </el-radio-group>
    </div>
    <div>
      <div id="userOldNew" style="width:500px;height:300px;" />
    </div>
    <div style="margin-top:50px;">
      <div id="repurchase" style="width:500px;height:300px;" />
    </div>
  </div>
</template>

<script>
import 'echarts/map/js/china'
import echarts from 'echarts'
export default {
  data() {
    return {
      userSurveyChart: null,
      userOldNewChart: null,
      repurchaseChart: null,
      userInfoList: [
        {
          title: '新增用户',
          hint: '筛选时间内，第一次访问店铺的用户数',
          nowNum: '236',
          compare: '+26%'
        },
        {
          title: '活跃用户',
          hint: '筛选时间内， 访问过店铺的用户数',
          nowNum: '312',
          compare: '+26%'
        },
        {
          title: '累计用户',
          hint: '截至到筛选时间，访问过店铺的全部用户数',
          nowNum: '312',
          compare: '+26%'
        },
        {
          title: '付费用户',
          hint: '筛选时间内，结算成功的用户数，一人多次结算记为一人',
          nowNum: '352',
          compare: '+26%'
        },
        {
          title: '累计付费用户',
          hint: '累计付费用户：截至到筛选时间，店铺内所有结算成功的用户数',
          nowNum: '352',
          compare: '+26%'
        }
      ],
      userContent: 'userNum',
      dealList: {
        visitor: '136',
        orderBuyer: '16',
        orderMoney: '566',
        payBuyer: '136',
        payMoney: '336',
        price: '99',
      },
      conversion: {
        firstRatio: '15%',
        secondRatio: '13%',
        thirdlyRatio: '8%'
      },
      userTableData: [
        {
          userType: '全部成交用户',
          userNum: '690',
          userRatio: '+16',
          perPrice: '199',
          totalPrice: '466',
          conversion: '+13%'
        },
        {
          userType: '老付费用户',
          userNum: '290',
          userRatio: '+16',
          perPrice: '199',
          totalPrice: '466',
          conversion: '+13%'
        },
        {
          userType: '新付费用户',
          userNum: '300',
          userRatio: '+16',
          perPrice: '199',
          totalPrice: '466',
          conversion: '+13%'
        }
      ],
      dayValue: '',
      WeekValue: '',
      monthValue: '',
      customValue: '',
      timeWay: 'timeDay',
      timeWayOptions: [
        {
          value: 'timeDay',
          label: '自然天'
        }, {
          value: 'timeWeek',
          label: '自然周'
        }, {
          value: 'timeMonth',
          label: '自然月'
        }, {
          value: 'timeCustom',
          label: '自定义'
        }
      ]
    }
  },
  mounted() {
    this.initUserSurveyChart()
    this.initUserOldNewChart()
    this.initRepurchaseChart()
  },
  beforeDestroy() {
    if (!this.tendencyChart) {
      return
    }
    this.tendencyChart.dispose()
    this.tendencyChart = null
  },
  methods: {
    initUserSurveyChart() {
      const chart = document.getElementById('userSurvey')
      chart.style.width = window.innerWidth - 250 + 'px'
      this.userSurveyChart = echarts.init(chart)
      this.userSurveyChart.setOption(
        {
          backgroundColor: '#fff',
          title: {
            text: '',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            left: '0%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 14,
            show: true,
            data: ['新增用户', '活跃用户', '累计用户', '付费用户', '累计付费用户'],
            selected: { '新增用户': true, '活跃用户': true, '累计用户': false, '付费用户': false, '累计付费用户': false },
            right: '3%',
            textStyle: {
              fontSize: 12,
              color: '#353535'
            }
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['2019-06-01', '2019-06-02', '2019-06-03', '2019-06-04', '2019-06-05', '2019-06-06', '2019-06-07', '2019-06-08', '2019-06-09', '2019-06-10', '2019-06-11', '2019-06-12']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          yAxis: [
            {
              type: 'value',
              name: '',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#57617B'
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#eee'
                }
              }
            }
          ],
          series: [
            {
              name: '新增用户',
              type: 'line',
              smooth: true,
              show: false,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(137, 189, 27, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(137, 189, 27, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(137,189,27)',
                  borderColor: 'rgba(137,189,2,0.27)',
                  borderWidth: 12

                }
              },
              data: [599.00, 399.00, 299.00, 199.00, 699.00, 499.00, 599.00, 299.00, 599.00, 499.00, 599.00, 299.00]
            },
            {
              name: '活跃用户',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 136, 212, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(0, 136, 212, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(0,136,212)',
                  borderColor: 'rgba(0,136,212,0.2)',
                  borderWidth: 12

                }
              },
              data: [5, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
            },
            {
              name: '累计用户',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(251,212,75, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(251,212,75, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(251,212,75)',
                  borderWidth: 12
                }
              },
              data: ['54', '90', '60', '90', '40', '70', '97', '78', '89', '45', '78', '56']
            },
            {
              name: '付费用户',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(244,102,124, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(244,102,124, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(244,102,124)',
                  borderWidth: 12
                }
              },
              data: [253, 322, 251, 125, 212, 354, 421, 452, 122, 220, 345, 391]
            },
            {
              name: '累计付费用户',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(137,123,211, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(137,123,211, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(137,123,211)',
                  borderWidth: 12
                }
              },
              data: [65, 35, 75, 65, 145, 111, 64, 75, 86, 96, 102, 84]
            }
          ]
        }
      )
    },
    initUserOldNewChart() {
      const chart = document.getElementById('userOldNew')
      chart.style.width = window.innerWidth - 250 + 'px'
      this.userOldNewChart = echarts.init(chart)
      this.userOldNewChart.setOption(
        {
          backgroundColor: '#fff',
          title: {
            text: '新老付费用户趋势',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            left: '0%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 14,
            show: true,
            data: ['新付费用户', '老付费用户'],
            selected: { '新付费用户': true, '老付费用户': true },
            right: '3%',
            textStyle: {
              fontSize: 12,
              color: '#353535'
            }
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['2019-06-01', '2019-06-02', '2019-06-03', '2019-06-04', '2019-06-05', '2019-06-06', '2019-06-07', '2019-06-08', '2019-06-09', '2019-06-10', '2019-06-11', '2019-06-12']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          yAxis: [
            {
              type: 'value',
              name: '',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#57617B'
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#eee'
                }
              }
            }
          ],
          series: [
            {
              name: '新付费用户',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(244,102,124, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(244,102,124, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(244,102,124)',
                  borderWidth: 12
                }
              },
              data: [253, 322, 251, 125, 212, 354, 421, 452, 122, 220, 345, 391]
            },
            {
              name: '老付费用户',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(137,123,211, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(137,123,211, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(137,123,211)',
                  borderWidth: 12
                }
              },
              data: [65, 35, 75, 65, 145, 111, 64, 75, 86, 96, 102, 84]
            }
          ]
        }
      )
    },
    initRepurchaseChart() {
      const chart = document.getElementById('repurchase')
      chart.style.width = window.innerWidth - 250 + 'px'
      this.repurchaseChart = echarts.init(chart)
      this.repurchaseChart.setOption(
        {
          backgroundColor: '#fff',
          title: {
            text: '客户复购趋势',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            left: '0%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 14,
            show: false,
            data: ['复购率'],
            selected: { '复购率': true },
            right: '3%',
            textStyle: {
              fontSize: 12,
              color: '#353535'
            }
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['2019-06-01', '2019-06-02', '2019-06-03', '2019-06-04', '2019-06-05', '2019-06-06', '2019-06-07', '2019-06-08', '2019-06-09', '2019-06-10', '2019-06-11', '2019-06-12']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          yAxis: [
            {
              type: 'value',
              name: '',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#57617B'
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#eee'
                }
              }
            }
          ],
          series: [
            {
              name: '复购率',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(251,212,75, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(251,212,75, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(251,212,75)',
                  borderWidth: 12
                }
              },
              data: ['54', '90', '60', '90', '40', '70', '97', '78', '89', '45', '78', '56']
            },
          ]
        }
      )
    },
    handleChangeUser(val) {
      console.log(val)
    }

  }
}
</script>

<style lang="scss" scoped>
.flow-box {
  padding: 10px;
  padding-bottom: 40px;
  .stat-card-box {
    cursor: pointer;
    padding: 0 14px;
    .stat-card {
      border: 1px solid #666;
      padding: 20px;
      margin: 1%;
      width: 48%;
      display: inline-block;
      .card-title {
        display: flex;
        color: #666;
        i {
          margin-left: auto;
        }
      }
      .card-user {
        font-size: 30px;
        color: #353535;
        margin: 5px 0px 30px;
      }
      .card-yesterday {
        font-size: 12px;
        color: #666;
        .card-yesterday-num {
          margin-left: 10px;
        }
      }
    }
    .stat-card.portait {
      display: block;
      width: 100%;
      margin: 2%;
    }
    .stat-card.user-view {
      margin: 0;
      width: 20%;
    }
    .stat-card.user-view:not(:nth-child(1)) {
      border-left: none;
    }
    .stat-card.again {
      width: 45%;
      margin-top: 60px;
    }
  }
  .trafficAreaTopTitle {
    color: #353535;
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 20px;
    font-weight: bold;
  }
}
</style>
